<!doctype html>
<html>
<head>
<meta charset="utf-8">
    <title>zz树</title>	
    <link rel="stylesheet" href="css/zTreeStyle/zTreeStyle.css">
	
    <script src="https://www.jq22.com/jquery/jquery-1.10.2.js"></script>
    <script type="text/javascript" src="js/jquery.ztree.core.min.js"></script>
    <style>
        .level2 a
        {
            color:red
        }
    </style>
</head>

<body>
    <ul id="treeDemo" class="ztree"></ul>
    <script>

        //设置
        var setting = {
            data: {
                key: {
                    title: "t",
                    name: "name"
                },
                view:{
                    fontCss:setFontCss  
                },
                simpleData: {
                    enable: true,
                    idKey: "id",
                    pIdKey: "pId",
                    rootPId: 0
                }
            },
            callback: {
                beforeClick: beforeClick,
                onClick: onClick,

            }

        };
        function setFontCss(treeId,treeNode){
            return node.font ? node.font : {};
        }
        
        $(document).ready(function () {
            
            $.ajax({
                type:'GET',
                url:'data/zt.json',
                dataType:'json',
                success:function(data){
                    $.fn.zTree.init($("#treeDemo"), setting, data);
                },
                error:function(error){
                    console.log(error);
                }
            })
            
        });

        var log, className = "dark";
        function beforeClick(treeId, treeNode, clickFlag) {
            className = (className === "dark" ? "" : "dark");
            showLog("[ " + getTime() + " beforeClick ]&nbsp;&nbsp;" + treeNode.name);
            return (treeNode.click != false);
        }
        function onClick(event, treeId, treeNode, clickFlag) {
            showLog("[ " + getTime() + " onClick ]&nbsp;&nbsp;clickFlag = " + clickFlag + " (" + (clickFlag === 1 ? "普通选中" : (clickFlag === 0 ? "<b>取消选中</b>" : "<b>追加选中</b>")) + ")");
			if(treeNode.name == '员工信息管理') {
				$('#one',parent.document).css({'display':'block'});
				$('#two',parent.document).css({'display':'none'});
			} else if(treeNode.name == '员工信息添加'){
				$('#one',parent.document).css({'display':'none'});
				$('#two',parent.document).css({'display':'block'});
			}
        }
        function showLog(str) {
            if (!log) log = $("#log");
            log.append("<li class='" + className + "'>" + str + "</li>");
            if (log.children("li").length > 8) {
                log.get(0).removeChild(log.children("li")[0]);
            }
        }
        function getTime() {
            var now = new Date(),
                h = now.getHours(),
                m = now.getMinutes(),
                s = now.getSeconds();
            return (h + ":" + m + ":" + s);
        }
    </script>
</body>

</html>